<template>
  <el-dialog
    title="新增新闻"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose">
    <div class="publish-input">
        <el-input
        type="textarea"
        placeholder="请输入新闻标题"
        v-model="newsTitle"
        maxlength="30"
        show-word-limit
      >
        </el-input>
        <div style="margin: 20px 0;"></div>
        <el-input
          type="textarea"
          placeholder="请输入新闻简介"
          v-model="newsIndroduction"
          maxlength="30"
          show-word-limit
        >
        </el-input>
        <div style="margin: 20px 0;"></div>
        <v-md-editor v-model="text" height="400px" style="margin-top: 10px;"></v-md-editor>
      </div>
      <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center;">
        <el-button @click="handleClose" style="width: 300px; margin-right: 80px;">取 消</el-button>
        <el-button type="primary" style="width: 300px;" @click="submit">提 交</el-button>
      </span>
  </el-dialog>
</template>

<style scoped>
.dialog-footer{
    display: flex;
}


.el-dialog__headerbtn{
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(10px, -30px);
}
</style>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        text: '',
        newsTitle:'',
        newsIndroduction:'',
        formLabelWidth: '120px'
      };
    },
    methods: {
      open() {
        this.dialogVisible = true;
      },
      
      handleClose() {
        this.dialogVisible = false;
        this.$emit("flesh");
      },

      submit() {
        console.log(this.text)
      },
    }
  };
</script>